<template>
	<view class="" style="position: relative;background: #F0F1F6;">
		<view class="withdraw-container">
		    <!-- <view class="withdraw-container-title">提现金额</view> -->
		    <view class="flex-wrp ipt">
		        <text class="y">￥</text>
		        <input type="number" placeholder="请输入提现金额" v-model="money" />
		    </view>
		    <view class="withdraw-container-desc">
		        <view class="withdrew-availableBalance">
		            可用余额
		            <span>{{ userInfo.commissionAmount ? userInfo.commissionAmount : 0 }}</span>
		            <span @click="allDeposit" style="color: #005CFF;">全部提现</span>
		        </view>
		        <view class="withdrew-fee">
		            <view>手续费：</view>
		            <view style="color: #333333;">{{txFee}}%</view>
		        </view>
		    </view>
		    
		</view>
		<view class="card-btn">
			<view class="add-card" @click="sureMessageFn">确认提现</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" border-radius="24rpx">
			<view class="cancelLay">
				<view class="title">
					提现信息
				</view>
				<view class="content">
					<input class="inputTxt" type="text" v-model.trim="openAccountName" placeholder="请输入开户名"  />
					<input class="inputTxt" type="text" v-model.trim="openBankName"   placeholder="请输入开户行" />
					<input class="inputTxt" type="text" v-model.trim="bankNumber"   placeholder="请输入卡号" />
					
				</view>
				<view class="bntLay">
					<view class="bnt" @click="close()">
						取消
					</view>
					<view class="bnt bnt2" @click="withdrawal();">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				imgHead: 'https://qr-card.oss-accelerate.aliyuncs.com/',
				userInfo:{},
				money:'',
				txFee:'',
				openAccountName:'',//开户名
				bankNumber:'',
				openBankName:'',//开户行
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserInfoFn();
			this.$http('/config/getConfigByKey',{
				configKey: 'sxfProportion'
			}).then(res=>{
				this.txFee = res.result.configValue * 100
			})
		},
		methods: {
			getUserInfoFn(){
				this.$http('/api/user/getUserInfo').then(res=>{
					this.userInfo = res.result
					uni.setStorageSync('userInfo',res.result)
				})
			},
			show(item) {
				this.$refs.popup.open('content');
			},
			close() {
				this.$refs.popup.close()
			},
			allDeposit(){
				this.money = this.userInfo.commissionAmount
				this.sureMessageFn()
			},
			sureMessageFn(){
				if(!this.money)
				{
					uni.showToast({
						title:"请输入提现金额",
						icon:'none'
					})
				return
				}
				this.show();
				},
				withdrawal(){
				/* uni.showModal({
					title: '是否确认提现',
					confirmText:'立即提现',
					success:(res)=> { */
						// if (res.confirm) {
							this.$http('/api/commission/withdrawal',{
								amount: this.money,
								openAccountName:this.openAccountName,
								openBankName:this.openBankName,
								bankNumber:this.bankNumber,
							},'POST',1).then(res=>{
								if(res.code==200){
									this.getUserInfoFn();
									uni.navigateBack().then(res=>{
										uni.showToast({
											title:'提现成功,请等待管理员审核',
											icon:'none'
										})
									})
								}else {
									uni.showToast({
										title:res.message,
										icon:'none'
									})
								}
							})
						// }
					/* }
				}); */
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw-container{
	    // height: 596rpx;
			padding-top: 20upx;
			padding-bottom: 20upx;
			margin-top: 20upx;
	    background: #FFFFFF;
	    border-radius: 22rpx;
	    .withdraw-container-title{
	        font-weight: 400;
	        font-size: 31rpx;
	        color: #333333;
	        line-height: 31rpx;
	        padding: 33rpx;
	    }
	    .ipt {
	        border-bottom: 2px solid #f2f2f2;
	        padding-bottom: 22rpx;
	        margin: 55rpx 33rpx 33rpx 33rpx;
	
	    }
	    .ipt input {
	        margin-left: 22rpx;
	        color: #333333;
	        line-height: 66rpx;
	        display: flex;
	        align-content: flex-start;
	        justify-content: center;
	        font-weight: 500;
	        font-size: 60rpx;
	        height: 66rpx;
	    }
	    .y{
	        font-weight: 500;
	        font-size: 66rpx;
	        color: #333333;
	        line-height: 66rpx;
	    }
	    .withdraw-container-desc{
	        margin: 33rpx;
	        display: flex;
	        flex-direction: column;
	        align-items: stretch;
	        justify-content: center;
	        gap: 33rpx;
	
	        font-weight: 400;
	        font-size: 31rpx;
	        color: #777777;
	        line-height: 31rpx;
	        .withdrew-availableBalance{
	            display: flex;
	            justify-content: flex-start;
	            align-items: center;
	            gap: 11rpx;
	        }
	        .withdrew-fee{
	            display: flex;
	            align-items: center;
	        }
	    }
	    .poster {
	        display: flex;
	        padding: 22rpx;
	        margin: 33rpx 11rpx 11rpx 11rpx;
	        font-size: 26rpx;
	        color: #338BFF;
	        line-height: 26rpx;
	
	        background: #E5F2FF;
	        border-radius: 18rpx;
	        .poster-img{
	            width: 26rpx;
	            height: 26rpx;
	            image{
	                width: 100%;
	                height: 100%;
	                display: block;
	            }
	            margin-right: 22rpx;
	        }
	        .poster-desc{
	            display: flex;
	            justify-content: center;
	            align-items: flex-start;
	            flex-direction: column;
	            gap: 22rpx;
	        }
	    }
	}
	.card-btn{
		width: 100%;
		background: #FFFFFF;
		padding: 20rpx 20rpx 60rpx;
		
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		.add-card{
			height: 94rpx;
			background: #005CFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 94rpx;
			z-index: 99;
		}
	}
	.cancelLay {
		width: 640rpx;
		background-color: #FFFFFF;
		border-radius: 24upx;
	
		.title {
			padding: 40upx 0;
			font-weight: 700;
			font-size: 36rpx;
			color: #1F2937;
			line-height: 54rpx;
			text-align: center;
		}
	
		.content {
			font-family: Source Han Serif CN, Source Han Serif CN;
			font-weight: 400;
			font-size: 31rpx;
			color: #3D3D3D;
			line-height: 57rpx;
			padding: 28upx 52upx 28upx;
			border-top: 2rpx solid #F3F4F6;
			border-bottom: 2rpx solid #F3F4F6;
			.inputTxt{
				border-bottom: 2rpx solid #F3F4F6;
				padding: 20upx 10upx;
				margin-bottom: 20upx;
			}
		}
	
		.bntLay {
			
			display: flex;
			align-content: center;
			justify-content: center;
			padding: 34upx 0;
	
			.bnt {
				width: 240rpx;
				height: 86rpx;
				// background: #F6F7FC;
				border-radius: 20rpx;
				border: 2rpx solid #338BFF;
				font-weight: 400;
				font-size: 28rpx;
				color: #338BFF;
				line-height: 78rpx;
				text-align: center;
			}
	
			.bnt2 {
				background: #338BFF;
				border: 2rpx solid #338BFF;
				color: #FFFFFF;
				margin-left: 20upx;
			}
		}
	}
</style>